<template>
    <a-spin :spinning="confirmLoading">
      <j-form-container>
        <a-form-model fullscreen.sync=fullscreen ref="form" :model="model" :rules="validatorRules" slot="detail">
          <a-row>
           
            
            
            
          
          
           
           
            
          </a-row>
  
          <!-- 子表单区域 -->
          <a-tabs defaultActiveKey="1" @change="changeTab">
  
            <a-tab-pane tab="外卖配置" key="1" forceRender v-if="!isAdd" v-has="'shopTakeout:view'">
              <a-form-model-item label="" v-show="!haveTakeOutInfor" :labelCol="labelCol" :wrapperCol="wrapperCol"
                prop="appoModel">
                <label style="margin-left:20%;">暂无外卖配置信息</label>
                <a-button type="link" class="edit-btn" @click="showeditDelivery = true" v-show="!disabled">
                  添加
                </a-button>
              </a-form-model-item>
              <a-row v-show="haveTakeOutInfor">
                <a-col :span="24 / 2">
                  <a-form-model-item label="自定义总单量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="textTotal">
                    <label v-show="showTakeOutInfor.textTotal">{{ showTakeOutInfor.textTotal }}</label>
                    <!-- <a-input-number v-model="model.textTotal" placeholder="请输入自定义总单量" style="width: 100%" /> -->
                  </a-form-model-item>
                </a-col>
                <a-col :span="10">
                  <a-form-model-item label="自定义月单量" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="textMonthly">
                    <label v-show="showTakeOutInfor.textMonthly">{{ showTakeOutInfor.textMonthly }}</label>
                    <!-- <a-input-number v-model="model.textMonthly" placeholder="请输入自定义月单量" style="width: 100%" /> -->
                  </a-form-model-item>
                </a-col>
                <a-col>
                  <a-button type="link" @click="showeditDelivery = true" v-show="!disabled">
                    编辑
                  </a-button>
                </a-col>
                <a-col :span="24 / 2">
                  <a-form-model-item label="统一打包费" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pack">
                    <label v-show="showTakeOutInfor.pack">{{ showTakeOutInfor.pack }}元</label>
                    <!-- <a-input v-model="model.pack" placeholder="请输入店铺统一打包费"></a-input> -->
                  </a-form-model-item>
                </a-col>
                <a-col :span="24 / 2">
                  <a-form-model-item label="配送时长" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="duration">
                    <label v-show="showTakeOutInfor.duration">{{ showTakeOutInfor.duration }}分钟</label>
                    <!-- <a-input-number v-model="model.duration" placeholder="请输入配送时长" style="width: 100%" /> -->
                  </a-form-model-item>
                </a-col>
                <a-col :span="24 / 2">
                  <a-form-model-item label="人均消费" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="perCost">
                    <label v-show="showTakeOutInfor.perCost">{{ showTakeOutInfor.perCos }}元</label>
                    <!-- <a-input v-model="model.perCost" placeholder="请输入人均消费"></a-input> -->
                  </a-form-model-item>
                </a-col>
                <a-col :span="24 / 2">
                  <a-form-model-item label="起送价格" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startFare">
                    <label v-show="showTakeOutInfor.startFare">{{ showTakeOutInfor.startFare }}元</label>
                    <!-- <a-input v-model="model.startFare" placeholder="请输入起送价格"></a-input> -->
                  </a-form-model-item>
                </a-col>
                <a-col :span="24 / 2">
                  <a-form-model-item label="免费配送条件" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="freeDistribution">
                    <label v-show="showTakeOutInfor.freeDistribution">满{{ showTakeOutInfor.freeDistribution }}元免配送费</label>
                    <!-- <a-input v-model="model.freeDistribution" placeholder="请输入免费配送条件"></a-input> -->
                  </a-form-model-item>
                </a-col>
                <a-col :span="24 / 2">
                  <a-form-model-item label="最大配送距离" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="mxDistance">
                    <label v-show="showTakeOutInfor.mxDistance">{{ showTakeOutInfor.mxDistance }}KM</label>
                    <!-- <a-input v-model="model.mxDistance" placeholder="请输入最大配送距离"></a-input> -->
                  </a-form-model-item>
                </a-col>
                <a-col :span="24 / 2">
                  <a-form-model-item label="免费配送距离" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="freeDistance">
                    <label v-show="showTakeOutInfor.freeDistance">{{ showTakeOutInfor.freeDistance }}KM</label>
                    <!-- <a-input v-model="model.freeDistance" placeholder="请输入免费配送距离"></a-input> -->
                  </a-form-model-item>
                </a-col>
  
                <a-col :span="24 / 2">
                  <a-form-model-item label="订单配送模式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="oderModel">
                    <j-dict-select-tag type="list" v-model="showTakeOutInfor.oderModel" dictCode="oderModel"
                      placeholder="请选择订单配送模式" />
                    <!--                  <label v-if="showTakeOutInfor.oderModel==1">手动发单</label>
                    <label v-if="showTakeOutInfor.oderModel==2">自动发出立即发出</label>
                    <label v-if="showTakeOutInfor.oderModel==3">提前5分钟自动发出</label>
                    <label v-if="showTakeOutInfor.oderModel==4">提前10分钟自动发出</label>-->
                    <!-- <a-input v-model="model.oderModel" placeholder="请输入订单配送模式"></a-input> -->
                  </a-form-model-item>
                </a-col>
                <a-col :span="24 / 2">
                  <a-form-model-item label="预约单配送模式" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="appoModel">
                    <j-dict-select-tag type="list" v-model="showTakeOutInfor.appoModel" dictCode="appoModel"
                      placeholder="请选择订单配送模式" />
                    <!--                  <label v-if="showTakeOutInfor.appoModel==1">手动发单</label>
                    <label v-if="showTakeOutInfor.appoModel==2">自动发出立即发出</label>
                    <label v-if="showTakeOutInfor.appoModel==3">提前5分钟自动发出</label>
                    <label v-if="showTakeOutInfor.appoModel==4">提前10分钟自动发出</label>-->
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-tab-pane>
          </a-tabs>
          <a-modal title="修改外卖设置" :visible="showeditDelivery" :confirm-loading="saveLoading" @ok="saveDelivery"
            @cancel="showeditDelivery = false" width="40%">
            <section class="edit-delivery">
              <a-form-model :label-col="labelCol" :model="takeOutInfor" ref="takeOutForm" :wrapper-col="wrapperCol"
                :rules="takeOutRules">
                <a-form-model-item label="自定义总单量" prop="textTotal">
                  <a-input-number v-model="takeOutInfor.textTotal" placeholder="请输入自定义总单量" style="width: 50%" />
                </a-form-model-item>
                <a-form-model-item label="自定义月单量" prop="textMonthly">
                  <a-input-number v-model="takeOutInfor.textMonthly" placeholder="请输入自定义月单量" style="width: 50%" />
                </a-form-model-item>
                <a-form-model-item label="配送时长" prop="duration">
                  <a-input-number v-model="takeOutInfor.duration" placeholder="请输入配送时长" style="width: 50%" />
                  <span>分钟</span>
                </a-form-model-item>
                <a-form-model-item label="人均消费" prop="perCost">
                  <a-input-number v-model="takeOutInfor.perCost" placeholder="请输入人均消费" style="width: 50%" />
                  <span>元</span>
                </a-form-model-item>
                <a-form-model-item label="起送价格" prop="startFare" :required="true">
                  <a-input-number v-model="takeOutInfor.startFare" placeholder="请输入起送价格" style="width: 50%" />
                  <span>元</span>
                </a-form-model-item>
                <a-form-model-item label="免费配送价格" prop="freeDistribution">
                  <a-input-number v-model="takeOutInfor.freeDistribution" placeholder="请输入免费配送价格" style="width: 30%" />
                  <span>元 0 表示不设置</span>
                </a-form-model-item>
                <a-form-model-item label="打包费" prop="pack">
                  <a-input-number v-model="takeOutInfor.pack" placeholder="打包费" style="width:20%;" />
                  <span>元 0 表示不设置，设置后商品设置的打包费将失效！</span>
                </a-form-model-item>
                <a-form-model-item label="免费配送距离" prop="freeDistance">
                  <a-input-number v-model="takeOutInfor.freeDistance" placeholder="请输入免费配送距离" style="width: 50%" />
                  <span>KM</span>
                </a-form-model-item>
                <a-form-model-item label="最大配送距离" prop="mxDistance" :required="true">
                  <a-input-number v-model="takeOutInfor.mxDistance" placeholder="请输入最大配送距离" style="width: 50%" />
                  <span>KM</span>
                </a-form-model-item>
                <a-form-model-item label="订单配送模式" prop="oderModel">
                  <j-search-select-tag dict="shop_send_type" placeholder="请设置订单配送模式" v-model="takeOutInfor.oderModel"
                    style="50%;">
                  </j-search-select-tag>
                </a-form-model-item>
                <a-form-model-item label="预约单配送模式" prop="appoModel">
                  <j-search-select-tag dict="shop_send_type" placeholder="请设置预约单配送模式" v-model="takeOutInfor.appoModel"
                    style="50%;">
                  </j-search-select-tag>
                </a-form-model-item>
              </a-form-model>
            </section>
          </a-modal>
          <a-modal title="账号绑定管理" :visible="showEditBind" :confirm-loading="saveLoading" @ok="saveBind"
            @cancel="showEditBind = false" width="46%">
            <section class="edit-send">
              <!-- <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item label="账号" prop="ptLoginName">
                  <a-input v-model="bindInfo.ptLoginName"></a-input>
                </a-form-model-item>
                <a-form-model-item label="验证码" prop="verificationCode">
                  <a-input v-model="verificationCode"></a-input>
                </a-form-model-item>
              </a-form-model> -->
              <a-form-model ref="form" :model="bindInfo" :rules="validatorRulesBind">
                <a-form-model-item required prop="ptLoginName">
                  <a-input v-model="bindInfo.ptLoginName" type="text" placeholder="请输入手机号">
                    <a-icon slot="prefix" type="ptLoginName" :style="{ color: 'rgba(0,0,0,.25)' }" />
                  </a-input>
                </a-form-model-item>
                <a-row :gutter="16">
                  <a-col class="gutter-row" :span="16">
                    <a-form-model-item required prop="captcha">
                      <a-input v-model="bindInfo.captcha" type="text" placeholder="请输入验证码">
                        <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }" />
                      </a-input>
                    </a-form-model-item>
                  </a-col>
                  <a-col class="gutter-row" :span="8">
                    <a-button class="getCaptcha" tabindex="-1" :disabled="state.smsSendBtn"
                      @click.stop.prevent="getCaptcha" v-text="!state.smsSendBtn && '获取验证码' || (state.time + ' s')">
                    </a-button>
                  </a-col>
                </a-row>
              </a-form-model>
            </section>
          </a-modal>
          <a-modal title="修改配送设置" :visible="showeditSend" :confirm-loading="saveLoading" @ok="saveSend"
            @cancel="showeditSend = false" width="46%">
            <section class="edit-send">
              <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol">
                <a-form-model-item label="起始价格">
                  <section class="start-price">
                    <a-input-number :precision="0" type="number" v-model="deliverySetInfor.startKilometer"
                      @blur="setSatrtKm">
                    </a-input-number>
                    <h5>(包含)公里以内</h5>
                    <a-input type="number" v-model="deliverySetInfor.startPrice"></a-input>
                    <h5>元</h5>
                  </section>
                </a-form-model-item>
                <a-form-model-item label="价格区间" v-show="deliverySetInfor.interval.length > 0">
                  <section class="start-price" v-for="(item, index) in deliverySetInfor.interval" :key="index">
                    <h5>{{ item.kilometerStr }}公里，至</h5>
                    <a-input-number :precision="0" type="number" v-model="item.kilometerEnd"
                      @blur="changePriceEnd(index, item.kilometerEnd)">
                    </a-input-number>
                    <h5>公里（包含），每公里累计加价</h5>
                    <a-input type="number" v-model="item.price"></a-input>
                    <h5>元</h5>
                    <a-icon type="delete" @click="delThisPrice(index, item)"
                      style="color:rgb(253, 34, 102);font-size:20px;cursor: pointer;" />
                  </section>
                </a-form-model-item>
                <a-form-model-item label="">
                  <section style="display:flex;justify-content:flex-end;">
                    <a-button type="primary" style="flex-right" @click="addNewSection">
                      添加区间
                    </a-button>
                  </section>
                </a-form-model-item>
                <a-form-model-item label="超出价格">
                  <section class="start-price">
                    <h5>{{ deliverySetInfor.exceedKilometer }}公里以上，每公里累计加价 </h5>
                    <a-input type="number" v-model="deliverySetInfor.exceedPrice"></a-input>
                    <h5>元</h5>
                  </section>
                </a-form-model-item>
              </a-form-model>
            </section>
          </a-modal>
          <!-- 打印机信息 -->
          <a-modal title="打印机信息" :visible="showPrinterInfor" :confirm-loading="saveLoading" @ok="savePrinter"
            @cancel="showPrinterInfor = false" width="40%">
            <section>
              <a-form-model :label-col="labelCol" ref="printerForm" :rules="printerRules" :model="choosePrinter"
                :wrapper-col="wrapperCol">
                <!-- span 的这些字段是在添加时才会显示 -->
                <span v-if="isNewPrinter">
                  <a-form-model-item label="打印机名称" prop="name" :required="true">
                    <a-input v-model="choosePrinter.name" placeholder="请输入打印机名称" style="width: 100%" />
                  </a-form-model-item>
                  <a-form-model-item label="打印机类型" prop="type" :required="true">
                    <j-search-select-tag dict="printer_type" placeholder="请选择打印机类型" v-model="choosePrinter.type">
                    </j-search-select-tag>
                  </a-form-model-item>
                  <a-form-model-item label="打印机编号" prop="number" :required="true">
                    <a-input v-model="choosePrinter.number" placeholder="请输入打印机编号" style="width: 100%" />
                  </a-form-model-item>
                  <a-form-model-item label="打印机秘钥" prop="printerKey" :required="true">
                    <a-input v-model="choosePrinter.printerKey" placeholder="请输入打印机秘钥" style="width: 100%" />
                  </a-form-model-item>
                </span>
                <a-form-model-item label="流量卡号码" prop="simNumber">
                  <a-input v-model="choosePrinter.simNumber" placeholder="请输入流量卡号码" style="width: 100%" />
                </a-form-model-item>
                <a-form-model-item label="打印次数" prop="cascadeCount">
                  <a-input v-model="choosePrinter.cascadeCount" placeholder="请输入打印次数" style="width: 100%" />
                </a-form-model-item>
                <a-form-model-item label="备注" prop="remark">
                  <a-input v-model="choosePrinter.remark" placeholder="请输入备注" style="width: 100%" />
                </a-form-model-item>
              </a-form-model>
            </section>
          </a-modal>
        </a-form-model>
      </j-form-container>
    </a-spin>
  </template>
  
  <script>
  import store from '@/store'
  import moment from "moment"
  import {
    AMapManager,
    lazyAMapApiLoaderInstance
  } from 'vue-amap'
  
  let amapManager = new AMapManager()
  import {
    httpAction,
    getAction,
    putAction,
    postAction,
    deleteAction
  } from '@/api/manage'
  import {
    validateDuplicateValue
  } from '@/utils/util'
  
  export default {
    name: 'ShopBasicForm',
    components: {},
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      },
  
    },
    data() {
      let self = this
      return {
        beginTime: moment('18:11', 'HH:mm'),
        value: null,
        checked1: false,
        checked2: false,
        findByShopId: {
          nightlyFares: [],
          isOpenNightlyFare: 1,
          isOpenSpecialWeatherFare: 0,
        },
        re: 0,
        showPrinterInfor: false,
        isNewPrinter: false,
        haveTakeOutInfor: false,
        showeditDelivery: false,
        saveLoading: false,
        address: null,
        isAdd: false,
        showeditSend: false,
        showEditBind: false,
        searchKey: '',
        amapManager,
        markers: [],
        noSendInfor: false,
        noBindInfo: false,
        printerLoading: false,
        takeOutRules: {
          startFare: [{
            required: true,
            message: '请输入起送价格!',
            trigger: ['change', 'blur']
          }],
          mxDistance: [{
            required: true,
            message: '请输入最大配送距离!',
            trigger: ['change', 'blur']
          }],
          oderModel: [{
            required: true,
            message: '请设置订单配送模式!',
            trigger: ['change', 'blur']
          }],
          appoModel: [{
            required: true,
            message: '请设置预约单配送模式!',
            trigger: ['change', 'blur']
          }],
        },
        searchOption: {
          city: '全国',
          citylimit: true
        },
        printerPagination: {
          defaultPageSize: 4
        },
        // 配送信息
        deliverySetInfor: {
          interval: [],
          exceedKilometer: '',
          exceedPrice: '',
          startKilometer: '',
          startPrice: ''
        },
        showSendInfor: {
          interval: [],
          exceedKilometer: '',
          exceedPrice: '',
          startKilometer: '',
          startPrice: ''
        },
        bindInfo: {
          id: '',
          ptLoginName: '',
          captcha: '',
          ccptBalance: ''
        },
        showBindInfo: {
          id: '',
          ptLoginName: '',
          ccptBalance: ''
        },
        // verificationCode: '1234',
        center: [121.329402, 31.228667],
        zoom: 17,
        lng: 0,
        lat: 0,
        loaded: false,
        events: {
          init() {
            lazyAMapApiLoaderInstance.load().then(() => {
              self.initSearch()
            })
          },
          // 点击获取地址的数据
          click(e) {
            // console.log(e)
            self.markers = []
            let {
              lng,
              lat
            } = e.lnglat
            self.lng = lng
            self.lat = lat
            self.center = [lng, lat]
            self.markers.push([lng, lat])
            // 这里通过高德 SDK 完成。
            let geocoder = new AMap.Geocoder({
              radius: 1000,
              extensions: 'all'
            })
            geocoder.getAddress([lng, lat], function (status, result) {
              if (status === 'complete' && result.info === 'OK') {
                if (result && result.regeocode) {
                  console.log(result.regeocode);
                  console.log(result.regeocode.formattedAddress)
                  // this.model.location=poi.name;
                  self.address = result.regeocode.formattedAddress
                  self.searchKey = result.regeocode.formattedAddress
                  self.$nextTick()
                }
              }
            })
          }
        },
        // 一些工具插件
        plugin: [{
          pName: 'Geocoder',
          events: {
            init(o) {
              console.log(o)
            }
          }
        },
        {
          // 定位
          pName: 'Geolocation',
          events: {
            init(o) {
              // o是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                  // 设置经度
                  self.lng = self.lng || result.position.lng
                  // 设置维度
                  self.lat = self.lat || result.position.lat
                  // 设置坐标
                  self.center = [self.lng, self.lat]
                  self.markers.push([self.lng, self.lat])
                  // load
                  self.loaded = true
                  // 页面渲染好后
                  self.$nextTick()
                }
              })
            }
          }
        },
        {
          // 工具栏
          pName: 'ToolBar',
          events: {
            init(instance) {
              // console.log(instance);
            }
          }
        },
        {
          // 鹰眼
          pName: 'OverView',
          events: {
            init(instance) {
              // console.log(instance);
            }
          }
        },
        {
          // 地图类型
          pName: 'MapType',
          defaultType: 0,
          events: {
            init(instance) {
              // console.log(instance);
            }
          }
        },
        {
          // 搜索
          pName: 'PlaceSearch',
          events: {
            init(instance) {
              // console.log(instance)
            }
          }
        }
        ],
        province: '',
        city: '',
        area: '',
        shopId: '',
        provinceList: [],
        cityList: [],
        districtList: [],
        channelList: [{
          id: 1,
          name: '主频道测试1'
        }],
        merchantList: [{
          id: 1,
          name: '商家测试1'
        }],
        mode2: ['time', 'time'],
        value: [],
        model: {
  
          type: 1,
          fullscreen: true,
  
        },
        modelDelivery: {},
        labelCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 4
          },
        },
        wrapperCol: {
          xs: {
            span: 24
          },
          sm: {
            span: 16
          },
        },
        choosePrinter: '',
        printerRules: {
          name: [{
            required: true,
            message: '请输入打印机名称!',
            trigger: ['change', 'blur']
          }],
          type: [{
            required: true,
            message: '请选择打印机类型!',
            trigger: ['change', 'blur']
          }],
          number: [{
            required: true,
            message: '请输入打印机编号!',
            trigger: ['change', 'blur']
          }],
          printerKey: [{
            required: true,
            message: '请输入打印机秘钥!',
            trigger: ['change', 'blur']
          }],
        },
        printerList: [],
        printerColumns: [{
          title: '名称',
          dataIndex: 'name'
        },
        {
          title: '状态',
          dataIndex: 'status'
        },
        {
          title: '类型',
          dataIndex: 'type_dictText'
        },
        {
          title: '编号',
          dataIndex: 'number'
        },
        {
          title: '秘钥',
          dataIndex: 'printerKey'
        },
        {
          title: '打印次数',
          dataIndex: 'cascadeCount'
        },
        {
          title: '备注',
          dataIndex: 'remark'
        },
        {
          title: '添加时间',
          dataIndex: 'createTime'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: "center",
          scopedSlots: {
            customRender: 'action'
          }
        }
        ],
        confirmLoading: false,
        takeOutInfor: {
          textTotal: '',
          textMonthly: '',
          pack: '',
          duration: '',
          perCost: '',
          startFare: '',
          freeDistribution: '',
          mxDistance: '',
          freeDistance: '',
          oderModel: '',
          appoModel: ''
        },
        showTakeOutInfor: {
          textTotal: '',
          textMonthly: '',
          pack: '',
          duration: '',
          perCost: '',
          startFare: '',
          freeDistribution: '',
          mxDistance: '',
          freeDistance: '',
          oderModel: '',
          appoModel: ''
        },
        //手机号登绑定用
        state: {
          time: 60,
          smsSendBtn: false,
        },
        validatorRulesBind: {
          ptLoginName: [
            { required: true, message: '请输入手机号码!' },
            { validator: this.validateMobile }
          ],
          captcha: [{
            required: true, message: '请输入验证码!'
          }]
        },
        validatorRules: {
          name: [{
            required: true,
            message: '请输入门店名称!'
          },],
          channelId: [{
            required: true,
            message: '请选择店铺频道'
          }],
          zfbName: [{
            required: true,
            message: '请输入支付宝姓名'
          }],
          zfbAccount: [{
            required: true,
            message: '请输入支付宝账号'
          }],
          logo: [{
            required: true,
            message: '请上传店铺LOGO!'
          }],
          license: [{
            required: true,
            message: '请上传营业执照!'
          },],
          commissionRate: [{
            required: false,
            message: '请输入佣金比例!'
          },
          {
            pattern: /^(([1-9][0-9]*)|([0]\.\d{0,2}|[1-9][0-9]*\.\d{0,2}))$/,
            message: '请输入佣金比例!（1-0.01）'
          },
          ]
        },
        url: {
          add: '/shop/shopBasic/add',
          edit: '/shop/shopBasic/edit',
          queryById: '/shop/shopBasic/queryById',
          getProvince: '/shop/shopBasic/selectAreaProvinceList',
          getCity: '/shop/shopBasic/selectAreaCityList',
          getDistrict: '/shop/shopBasic/selectAreaDistrictList',
          getTakeOut: "/shop/shopTakeout/queryByShopId",
          addTakeOut: '/shop/shopTakeout/add',
          editTakeOut: '/shop/shopTakeout/edit',
          getDelivery: '/shopDelivery/queryByShopId',
          saveDelivery: '/shopDelivery/edit',
          addDelivery: '/shopDelivery/add',
          getBind: '/shopMemberBind/queryByShopId',
          editBind: '/shopMemberBind/edit',
          addBind: '/shopMemberBind/add',
          untieBind: '/shopMemberBind/untie',
          getPrinterList: '/shopPrinter/list',
          addPrinte: '/shopPrinter/add',
          editPrinte: '/shopPrinter/edit',
          delPrinte: '/shopPrinter/delete',
  
          findByShopId: '/shopFareConfig/findByShopId',//按shopId查询店铺加价配置
          addShop: '/shopFareConfig/add',//新增店铺加价配置
          editShop: '/shopFareConfig/edit',//更新店铺加价配置
          changeState: '/shopFareConfig/changeState',//变更店铺加价配置状态
  
        },
        blurIndex: {}
      }
    },
    computed: {
      formDisabled() {
        return this.disabled
      },
      condition() {
        if (store.getters.userInfoSite) {
          return `{"site_id": "${store.getters.userInfoSite.id}"}`
        } else { return '{}' }
      }
  
    },
    created() {
      this.getProvince()
      //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model))
      this.modelDeliveryDefault = JSON.parse(JSON.stringify(this.modelDelivery))
  
    },
    mounted() {
      this.$nextTick(() => {
        this.searchKey = this.address
        this.center = [this.lng, this.lat]
      })
      setTimeout(() => {
        this.findBy()
        this.getShopTakeOutInfor()
      }, 1000)
    },
  
    methods: {
      findBy() {
        console.log(this.shopId)
        let that = this
        getAction(that.url.findByShopId, { shopId: that.shopId }).then(res => {
          console.log(res)
          if (res.result) {
            that.findByShopId = res.result
            that.findByShopId.nightlyFares.forEach((e) => {
              console.log(e)
              e.beginTime1 = moment(e.startTime, 'HH:mm')
              e.beginTime2 = moment(e.endTime, 'HH:mm')
            })
            if (res.result.isOpenNightlyFare == 1) {
              that.checked1 = true
            } else {
              that.checked1 = false
            }
            if (res.result.isOpenSpecialWeatherFare == 1) {
              that.checked2 = true
            } else {
              that.checked2 = false
            }
          }
        })
      },
      changes(time, timeString) {
        if (this.blurIndex.sty == "startTime") {
          this.findByShopId.nightlyFares[this.blurIndex.index].startTime = timeString
        }
        if (this.blurIndex.sty == "endTime") {
          this.findByShopId.nightlyFares[this.blurIndex.index].endTime = timeString
        }
        console.log(time, timeString);
      },
      blur(e, y) {
        this.blurIndex.index = e
        this.blurIndex.sty = y
        console.log(this.blurIndex)
      },
      addShopFareConfig() {
        let that = this
        if (that.checked1) {
          that.findByShopId.isOpenNightlyFare = 1
        } else {
          that.findByShopId.isOpenNightlyFare = 0
        }
        if (that.checked2) {
          that.findByShopId.isOpenSpecialWeatherFare = 1
        } else {
          that.findByShopId.isOpenSpecialWeatherFare = 0
        }
        that.findByShopId.shopId = that.shopId
        postAction(that.url.addShop, that.findByShopId).then(res => {
          console.log(res)
          if (res.code == 200) {
            that.$message.success("成功")
          }
          if (res.message == "店铺已有加价配置，请勿重复添加") {
            if (that.checked1) {
              if (that.findByShopId.nightlyFares.length == 0 || that.findByShopId.nightlyFares[0].startTime == '') {
                this.$message.warning("夜间加价区间未配置")
              } else {
                putAction(that.url.editShop, that.findByShopId).then(require => {
                  console.log(require)
                  if (require.code == 200) {
                    that.$message.success("成功")
                  }
                })
              }
            } else {
              putAction(that.url.editShop, that.findByShopId).then(require => {
                console.log(require)
                if (require.code == 200) {
                  that.$message.success("成功")
                }
              })
            }
  
          }
        })
        console.log(this.findByShopId)
      },
      onChange(checked) {
        if (checked == "1") {
          !this.checked1
        }
        if (checked == "2") {
          !this.checked2
        }
      },
      filterOption(input, option) {
        return (
          option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
        );
      },
      // 删除区间
      del(index) {
        this.findByShopId.nightlyFares.splice(index, 1);
      },
      // 添加区间
      addSection() {
        let da = {
          startTime: '',
          endTime: '',
          money: ''
        }
        let a = this.findByShopId.nightlyFares
        if (a != null) {
          var bol = a.every(function (e) {
            if (e.endTime != null && e.startTime != null && e.money != "") {
              return e;
            }
          })
        } else {
          this.findByShopId.nightlyFares = []
          bol = true
        }
  
        if (bol) {
          this.findByShopId.nightlyFares.push(da);
        } else {
          this.$message.warning("区间需填写完整");
        }
      },
      // 验证费用
      changeNum(x, y) {
        if (!y) {
          this.findByShopId.nightlyFares[x].money = 1
          this.$message.warning("请填写加价费用");
        }
        if (y <= 0) {
          this.findByShopId.nightlyFares[x].money = 1
        }
        this.findByShopId.nightlyFares[x].money = Number(this.findByShopId.nightlyFares[x].money).toFixed(2)
  
      },
      // 时间段加价验证
      validationTime(x, y) {
        let len = this.findByShopId.nightlyFares.length
        if (this.findByShopId.nightlyFares[x].startTime == this.findByShopId.nightlyFares[x].endTime) {
          this.$message.warning("两次时间段不能相同");
          this.findByShopId.nightlyFares[x].startTime = null
          this.findByShopId.nightlyFares[x].endTime = null
        }
      },
      // 保存打印机
      savePrinter() {
        if (this.isNewPrinter) {
          this.$refs.printerForm.validate(valid => {
            if (valid) {
              this.saveLoading = true
              postAction(this.url.addPrinte, this.choosePrinter).then(res => {
                this.saveLoading = false;
                if (res.success) {
                  this.$message.success(res.message)
                  this.showPrinterInfor = false;
                  this.getPrinterList();
                }
              })
            }
          })
        } else {
          this.$refs.printerForm.validate(valid => {
            if (valid) {
              this.saveLoading = true
              putAction(this.url.editPrinte, this.choosePrinter).then(res => {
                this.saveLoading = false;
                if (res.success) {
                  this.$message.success(res.message)
                  this.showPrinterInfor = false;
                  this.getPrinterList();
                }
              })
            }
          })
        }
      },
      // 获取店铺外卖配置
      getShopTakeOutInfor() {
        getAction(this.url.getTakeOut, {
          shopId: this.shopId
        }).then(res => {
          console.log(res);
          if (res.success) {
            console.log("takeOutInfor");
            this.haveTakeOutInfor = true;
            this.showTakeOutInfor = res.result;
            let str = JSON.stringify(res.result)
            this.takeOutInfor = JSON.parse(str);
          } else if (res.code == 404) {
            this.haveTakeOutInfor = false;
          }
        })
      },
      // 删除打印机
      printerDelete(index) {
        deleteAction(this.url.delPrinte, {
          id: index
        }).then(res => {
          if (res.success) {
            this.getPrinterList();
          }
        })
      },
      changeTab(activeKey) {
        if (activeKey == 1) {
          this.getShopTakeOutInfor();
        } else if (activeKey == 2) {
          this.getDelivery();
        } else if (activeKey == 3) {
          this.getPrinterList();
        } else if (activeKey == 4) {
          this.getBindInfo();
        } else if (activeKey == 5) {
          console.log(this.model);
        }
      },
      getProvince() {
        this.provinceList = []
        getAction(this.url.getProvince).then(res => {
          if (res.success) {
            this.provinceList = res.result
          }
        })
        console.log(this.provinceList)
      },
      // 获取打印机列表
      getPrinterList() {
        this.printerLoading = true;
        getAction(this.url.getPrinterList, {
          shopId: this.shopId
        }).then(res => {
          console.log(res);
          this.printerLoading = false;
          if (res.success) {
            this.printerList = res.result.records;
          }
        })
      },
      // 编辑打印机
      printerEdit(index) {
        this.isNewPrinter = false;
        this.showPrinterInfor = true;
        let str = JSON.stringify(index);
        this.choosePrinter = JSON.parse(str);
      },
      // 新增打印机
      addPrinter() {
        this.isNewPrinter = true;
        this.showPrinterInfor = true;
        this.choosePrinter = {
          name: "",
          type: null,
          number: '',
          printerKey: "",
          remark: '',
          simNumber: '',
          shopId: this.shopId
        }
      },
      // 选择省份
      getCity(e, a) {
        console.log('======city e=====' + e)
        if (e === null) return
        this.provinceList.forEach(item => {
          if (item.sid == e) {
            this.model.province_dictText = item.name;
            this.searchKey = item.name;
          }
        })
        this.searchByHand();
        this.cityList = []
        getAction(this.url.getCity + '/' + e).then(res => {
          if (res.success) {
            this.cityList = res.result
          }
        })
        console.log(a);
        if (a) {
          return;
        }
        this.model.city = undefined;
        this.model.area = undefined;
        this.model.area_dictText = '';
        this.model.city_dictText = '';
        this.model.location = '';
      },
      // 选择城市
      getDistrict(e, a) {
        console.log('======district e=====' + e)
        if (e === null) return
        this.districtList = []
        this.cityList.forEach(item => {
          if (item.sid == e) {
            this.model.city_dictText = item.name;
            this.searchKey = this.model.province_dictText + item.name
          }
        })
        this.searchByHand();
        getAction(this.url.getDistrict + '/' + e).then(res => {
          if (res.success) {
            this.districtList = res.result
          }
        })
        if (a) {
          return;
        }
        this.model.area_dictText = '';
        this.model.area = undefined;
        this.model.location = '';
      },
      // 选择区域
      getArea(e) {
        this.districtList.forEach(item => {
          if (item.sid == e) {
            this.model.area_dictText = item.name;
            this.searchKey = this.model.province_dictText + this.model.city_dictText + item.name
          }
        })
        this.searchByHand();
        this.$forceUpdate();
      },
      // 输入定位地址
      setLocation() {
        this.searchKey = this.model.province_dictText + this.model.city_dictText + this.model.area_dictText + this.model.location;
        this.searchByHand();
      },
      initSearch() {
        let vm = this
        let map = this.amapManager.getMap()
        AMapUI.loadUI(['misc/PoiPicker'], function (PoiPicker) {
          var poiPicker = new PoiPicker({
            input: 'search',
            placeSearchOptions: {
              map: map,
              pageSize: 10
            },
            suggestContainer: 'searchTip',
            searchResultsContainer: 'searchTip'
          })
          vm.poiPicker = poiPicker
          // 监听poi选中信息
          poiPicker.on('poiPicked', function (poiResult) {
            // console.log(poiResult)
            let source = poiResult.source
            let poi = poiResult.item
            if (source !== 'search') {
              poiPicker.searchByKeyword(poi.name)
            } else {
              poiPicker.clearSearchResults()
              vm.markers = []
              let lng = poi.location.lng
              let lat = poi.location.lat
              let address = poi.cityname + poi.adname + poi.name
              vm.model.location = poi.name;
              vm.center = [lng, lat]
              vm.markers.push([lng, lat])
              vm.lng = lng
              vm.lat = lat
              vm.address = address
              vm.searchKey = address
              const d = {
                pos: [lng, lat],
                adname: poi.adname,
                name: poi.name,
                address: poi.pname +
                  ' ' +
                  poi.cityname +
                  ' ' +
                  poi.adname +
                  ' ' +
                  poi.address +
                  ' ' +
                  poi.name,
              }
              vm.$emit('poi', d)
            }
          })
        })
      },
      searchByHand() {
        if (this.searchKey !== '') {
          this.poiPicker.searchByKeyword(this.searchKey)
        } else {
  
        }
  
      },
      // 保存外卖设置
      saveDelivery() {
        this.takeOutInfor.shopId = this.shopId;
        this.$refs.takeOutForm.validate(valid => {
          if (valid) {
            this.saveLoading = true;
            if (this.haveTakeOutInfor) {
              putAction(this.url.editTakeOut, this.takeOutInfor).then(res => {
                this.saveLoading = false;
                if (res.success) {
                  this.showeditDelivery = false;
                  this.getShopTakeOutInfor();
                  this.$message.success(res.message)
                }
              })
            } else {
              postAction(this.url.addTakeOut, this.takeOutInfor).then(res => {
                console.log(res);
                this.saveLoading = false;
                if (res.success) {
                  this.showeditDelivery = false;
                  this.haveTakeOutInfor = true;
                  this.getShopTakeOutInfor();
                  this.$message.success(res.message)
                }
              })
            }
  
          }
        })
      },
      // 解除绑定账号信息
      untieBind() {
        deleteAction(this.url.untieBind, {
          shopId: this.shopId
        }).then(res => {
          if (res.success) {
            this.$message.success('解除绑定成功')
            this.getBindInfo();
          } else {
            this.$message.error(res.message)
          }
        })
      },
      // 保存绑定账号信息
      saveBind() {
        this.validateFields(['ptLoginName', 'captcha'], (err) => {
          if (!err) {
            this.saveLoading = true;
            if (this.noBindInfo) {
              postAction(this.url.addBind + '/' + this.bindInfo.captcha, { ptLoginName: this.bindInfo.ptLoginName, shopId: this.shopId }).then(res => {
                this.saveLoading = false;
                console.log(res);
                if (res.success) {
                  this.noBindInfo = false;
                  this.showEditBind = false;
                  this.showBindInfo = JSON.parse(JSON.stringify(this.bindInfo));
                  this.$message.success(res.message)
                } else {
                  this.$message.error(res.message)
                }
              })
            } else {
              putAction(this.url.editBind + '/' + this.bindInfo.captcha, { ...this.bindInfo, shopId: this.shopId }).then(res => {
                this.saveLoading = false;
                if (res.success) {
                  this.showEditBind = false;
                  this.showBindInfo = JSON.parse(JSON.stringify(this.bindInfo));
                  this.$message.success(res.message)
                } else {
                  this.$message.error(res.message)
                }
              })
            }
          } else {
            this.$emit('validateFail')
          }
        })
      },
      // 校验手机号
      validateMobile(rule, value, callback) {
        if (!value || new RegExp(/^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/).test(value)) {
          callback();
        } else {
          callback("您的手机号码格式不正确!");
        }
      },
      //获取验证码
      getCaptcha(e) {
        e.preventDefault();
        let that = this;
        that.validateFields(['ptLoginName'], (err) => {
          if (!err) {
            that.state.smsSendBtn = true;
            let interval = window.setInterval(() => {
              if (that.state.time-- <= 0) {
                that.state.time = 60;
                that.state.smsSendBtn = false;
                window.clearInterval(interval);
              }
            }, 1000);
  
            const hide = that.$message.loading('验证码发送中..', 0);
            let smsParams = {};
            smsParams.mobile = that.bindInfo.ptLoginName;
            smsParams.smsmode = "4";
            postAction("/sys/sms", smsParams)
              .then(res => {
                if (!res.success) {
                  setTimeout(hide, 0);
                  that.cmsFailed(res.message);
                }
                console.log(res);
                setTimeout(hide, 500);
              })
              .catch(err => {
                setTimeout(hide, 1);
                clearInterval(interval);
                that.state.time = 60;
                that.state.smsSendBtn = false;
                that.requestFailed(err);
              });
          }
        }
        );
      },
      cmsFailed(err) {
        this.$notification['error']({
          message: '获取验证码失败',
          description: err,
          duration: 4,
        });
      },
      /**
       * 验证字段
       * @param arr
       * @param callback
       */
      validateFields(arr, callback) {
        let promiseArray = []
        for (let item of arr) {
          let p = new Promise((resolve, reject) => {
            this.$refs['form'].validateField(item, (err) => {
              if (!err) {
                resolve();
              } else {
                reject(err);
              }
            })
          });
          promiseArray.push(p)
        }
        Promise.all(promiseArray).then(() => {
          callback()
        }).catch(err => {
          callback(err)
        })
      },
      // 保存配送设置
      saveSend() {
        this.deliverySetInfor.shopId = this.shopId;
        if (!this.deliverySetInfor.exceedPrice || !this.deliverySetInfor.startKilometer || !this.deliverySetInfor
          .startPrice) {
          this.$message.error('请保证起始价格和超出价格完整');
          return;
        }
        if (this.deliverySetInfor.interval.length > 0) {
          this.deliverySetInfor.interval.forEach((item, index) => {
            if (!item.kilometerEnd || !item.price) {
              this.delThisPrice(index, null)
            }
          })
        }
        this.saveLoading = true;
        if (this.noSendInfor) {
          postAction(this.url.addDelivery, this.deliverySetInfor).then(res => {
            this.saveLoading = false;
            console.log(res);
            if (res.success) {
              this.noSendInfor = false;
              this.showeditSend = false;
              let str = JSON.stringify(this.deliverySetInfor);
              this.showSendInfor = JSON.parse(str);
              this.$message.success(res.message)
            }
          })
        } else {
          putAction(this.url.saveDelivery, this.deliverySetInfor).then(res => {
            this.saveLoading = false;
            if (res.success) {
              this.showeditSend = false;
              let str = JSON.stringify(this.deliverySetInfor);
              this.showSendInfor = JSON.parse(str);
              this.$message.success(res.message)
            }
          })
        }
      },
      // 设置起始距离
      setSatrtKm() {
        let startKm = this.deliverySetInfor.startKilometer;
        if (this.deliverySetInfor.interval.length > 0) {
          if (Number(this.deliverySetInfor.interval[0].kilometerEnd) > Number(startKm)) {
            this.deliverySetInfor.interval[0].kilometerStr = startKm;
            // this.deliverySetInfor.startKilometer = '';
          } else {
            this.$message.error('请大于第一区间起始距离');
            this.deliverySetInfor.startKilometer = '';
          }
        } else {
          this.deliverySetInfor.exceedKilometer = startKm;
        }
        this.$forceUpdate();
      },
      // 修改区间结束距离
      changePriceEnd(x, y) {
        let len = this.deliverySetInfor.interval.length;
        if (len == 1) {
          if (Number(y) <= Number(this.deliverySetInfor.startKilometer)) {
            this.$message.error('请大于区间起始距离');
            this.deliverySetInfor.interval[x].kilometerEnd = '';
          } else {
            this.deliverySetInfor.exceedKilometer = y;
          }
        } else {
          if (x == len - 1) {
            if (Number(y) <= Number(this.deliverySetInfor.interval[x].kilometerStr)) {
              this.$message.error('请大于区间起始距离');
              this.deliverySetInfor.interval[x].kilometerEnd = '';
            } else {
              this.deliverySetInfor.exceedKilometer = y
            }
          } else {
            if (Number(y) <= Number(this.deliverySetInfor.interval[x].kilometerStr)) {
              this.$message.error('请大于区间起始距离');
              this.deliverySetInfor.interval[x].kilometerEnd = '';
            } else if (Number(y) >= Number(this.deliverySetInfor.interval[x + 1].kilometerEnd)) {
              this.$message.error('请小于下一区间的结束距离');
              this.deliverySetInfor.interval[x].kilometerEnd = '';
            } else {
              this.deliverySetInfor.interval[x + 1].kilometerStr = y
            }
          }
        }
        this.$forceUpdate();
      },
      // 添加区间
      addNewSection() {
        let len = this.deliverySetInfor.interval.length;
        if (len == 0) {
          if (this.deliverySetInfor.startKilometer) {
            let newPrice = {
              kilometerStr: this.deliverySetInfor.startKilometer,
              kilometerEnd: '',
              price: ''
            }
            this.deliverySetInfor.interval.push(newPrice);
          } else {
            this.$message.error('请添加起始距离');
          }
        } else {
          if (this.deliverySetInfor.interval[len - 1].kilometerEnd) {
            let newPrice = {
              kilometerStr: this.deliverySetInfor.interval[len - 1].kilometerEnd,
              kilometerEnd: '',
              price: ''
            }
            this.deliverySetInfor.interval.push(newPrice);
          } else {
            this.$message.error('请保证区间距离完整');
          }
        }
      },
      // 获取配送设置
      getDelivery() {
        getAction(this.url.getDelivery, {
          shopId: this.shopId
        }).then(res => {
          console.log(res);
          if (res.success && res.result) {
            this.showSendInfor = res.result;
            let str = JSON.stringify(this.showSendInfor);
            this.deliverySetInfor = JSON.parse(str);
            this.noSendInfor = false;
          } else {
            this.noSendInfor = true;
          }
        })
      },
      // 获取绑定信息
      getBindInfo() {
        console.log('getBindInfo')
        getAction(this.url.getBind, {
          shopId: this.shopId
        }).then(res => {
          console.log("获取到的绑定信息====：：：：   ", res);
          if (res.success && res.result) {
            this.showBindInfo.ptLoginName = res.result.ptLoginName;
            this.showBindInfo.ccptBalance = res.result.ccptBalance;
            this.bindInfo.ptLoginName = res.result.ptLoginName;
            this.bindInfo.id = res.result.id;
            this.bindInfo.ccptBalance = res.result.ccptBalance;
            this.noBindInfo = false;
          } else {
            this.noBindInfo = true;
          }
        })
      },
      // 删除区间
      delThisPrice(x, y) {
        this.deliverySetInfor.interval.splice(x, 1);
        if (this.deliverySetInfor.interval.length == 0) {
          this.deliverySetInfor.exceedKilometer = this.deliverySetInfor.startKilometer;
          return;
        }
        if (x == 0) {
          this.deliverySetInfor.interval[0].kilometerStr = this.deliverySetInfor.startKilometer;
        } else if (x == this.deliverySetInfor.interval.length) {
          this.deliverySetInfor.exceedKilometer = this.deliverySetInfor.interval[x - 1].kilometerEnd;
        } else {
          this.deliverySetInfor.interval[x].kilometerStr = this.deliverySetInfor.interval[x - 1].kilometerEnd;
        }
      },
      add() {
        this.getProvince()
        this.isAdd = true;
        this.model = Object.assign({}, this.modelDefault);
        this.modelDelivery = Object.assign({}, this.modelDeliveryDefault)
        this.visible = true
        console.log(store.getters.userInfoMerchant)
        console.log(store.getters.userInfoSite)
        this.$emit('handleChangeThreeElements', {
          site: store.getters.userInfoSite.name,
          merchant: store.getters.userInfoMerchant.name,
        })
        this.model.merchantName = store.getters.userInfoMerchant.name
        this.model.merchantId = store.getters.userInfo.merchantId
        this.model.siteName = store.getters.userInfoSite.name
        this.model.siteId = store.getters.userInfo.siteId
      },
      edit(record) {
        this.isAdd = false;
        this.getProvince();
        this.model = Object.assign({}, record);
        this.shopId = this.model.id;
        this.$emit('handleChangeThreeElements', {
          site: store.getters.userInfoSite.name,
          merchant: store.getters.userInfoMerchant.name,
        })
        this.getShopTakeOutInfor()
        if (this.model.businessStd) {
          moment(this.model.businessStd, 'HH:mm');
        }
        if (this.model.businessEnd) {
          moment(this.model.businessEnd, 'HH:mm')
        }
        this.visible = true
        if (null != record.lat || null != record.lng) {
          this.lat = record.lat
          this.lng = record.lng
          this.address = record.address
          console.log(record)
          console.log(this.lng)
          console.log(this.address)
          console.log(this.lat)
          this.center = [this.lng, this.lat] //设置中心点
          this.markers = [] //清空
          this.markers.push([this.lng, this.lat]) //设置点位置
  
        }
        this.getCity(record.province, true)
        this.getDistrict(record.city, true)
      },
      submitForm() {
        const that = this
        this.model.lng = this.lng;
        this.model.lat = this.lat;
        this.model.addressText = this.model.province_dictText + this.model.city_dictText + this.model.area_dictText + this.model.location + this.model.address;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          console.log(valid);
          if (valid) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            if (!this.model.id) {
              httpurl += this.url.add
              method = 'post'
            } else {
              httpurl += this.url.edit
              method = 'put'
            }
            httpAction(httpurl, this.model, method).then((res) => {
              console.log(res);
              if (res.success) {
                that.$message.success(res.message)
                that.$emit('ok')
              } else {
                that.$message.warning('操作异常')
              }
            }).finally(() => {
              that.confirmLoading = false
            })
          }
  
        })
      },
    }
  }
  </script>
  
  <style lang="css" scoped>
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  
  input[type='number'] {
    -moz-appearance: textfield;
  }
  
  .one-section {
    display: flex;
    align-items: center;
  }
  
  .one-section p {
    margin: 0 10px;
  }
  
  .one-section input {
    width: 15%;
  }
  
  .container {
    width: 80%;
    height: 100%;
    position: relative;
    left: 85%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    border: 1px solid #999;
  }
  
  .edit-btn {
    margin-left: 20%;
  }
  
  .edit-delivery {
    height: 60vh;
    overflow: scroll;
    box-sizing: border-box;
    overflow-x: visible;
  }
  
  .start-price {
    display: flex;
    align-items: center;
  }
  
  .start-price input {
    width: 3vw;
  }
  
  .start-price h5 {
    margin: 0 10px;
  }
  
  .search-box {
    position: absolute;
    z-index: 5;
    width: 50%;
    left: 13%;
    top: 10px;
    height: 40px;
  }
  
  .search-box input {
    float: left;
    width: 80%;
    /*height: 100%;*/
    border: 1px solid #30ccc1;
    padding: 0 8px;
    outline: none;
  }
  
  .search-box button {
    float: left;
    width: 20%;
    /*height: 100%;*/
    background: #30ccc1;
    border: 1px solid #30ccc1;
    color: #fff;
    outline: none;
  }
  
  .tip-box {
    width: 100%;
    /*max-height: 260px;*/
    position: absolute;
    top: 30px;
    overflow-y: auto;
    background-color: #fff;
  }
  
  /* 解决tabs里所有下拉框都无法正常使用的bug */
  .ant-tabs {
    overflow: none;
  }
  
  .getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }
  </style>